<div class="row">
    <div class="col-md-6 ">
        <!-- BEGIN SAMPLE FORM PORTLET-->
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-cogs"></i>按钮
                </div>
            </div>
            <div class="panel-body">
                <div class="clearfix">
                    <h4 class="block">基本类型</h4>
                    <!-- Standard gray button with gradient -->
                    <button type="button" class="btn btn-default">Default</button>
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn btn-primary">Primary</button>
                    <!-- Indicates a successful or positive action -->
                    <button type="button" class="btn btn-success">Success</button>
                    <!-- Contextual button for informational alert messages -->
                    <button type="button" class="btn btn-info">Info</button>
                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning">Warning</button>
                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger">Danger</button>
                    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                    <button type="button" class="btn btn-link">Link</button>
                </div>
                <div class="clearfix">
                    <h4 class="block">Mower自定义按钮</h4>
                    <p>
                        <button type="button" class="btn btn-blue">蓝色</button>
                        <button type="button" class="btn btn-sky">天蓝色</button>
                        <button type="button" class="btn btn-azure">蔚蓝色</button>
                        <button type="button" class="btn btn-palegreen">浅绿色</button>
                        <button type="button" class="btn btn-darkorange">深橙色</button>
                        <button type="button" class="btn btn-magenta">洋红色</button>
                        <button type="button" class="btn btn-purple">紫色</button>
                    </p>
                </div>
                <div class="clearfix">
                    <h4 class="block">不可用状态</h4>
                    <button type="button" class="btn disabled btn-blue">蓝色</button>       
                    <button type="button" class="btn disabled btn-sky">天蓝色</button>      
                    <button type="button" class="btn disabled btn-azure">蔚蓝色</button>    
                    <button type="button" class="btn disabled btn-palegreen">浅绿色</button>
                    <button type="button" class="btn disabled btn-darkorange">深橙色</button>
                    <button type="button" class="btn disabled btn-magenta">洋红色</button>  
                    <button type="button" class="btn disabled btn-purple">紫色</button>     
                </div>
                <div class="clearfix">
                    <h4 class="block">按钮大小</h4>
                    <button type="button" class="btn btn-default btn-lg">大按钮</button>
                    <button type="button" class="btn btn-danger">默认按钮</button>
                    <button type="button" class="btn btn-blue btn-sm">小按钮</button>
                    <button type="button" class="btn btn-palegreen btn-sm">特小按钮</button>
                </div>
                <div class="clearfix">
                    <h4 class="block">按钮类型</h4>
                    <a href="javascript:;" class="btn btn-default"> 链接 </a>
                    <button class="btn btn-default">按钮</button>
                    <input type="button" class="btn btn-default" value="输入框">
                    <input type="submit" class="btn btn-default" value="提交"> 
                </div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
        <div class="panel-heading">
            <div class="caption">
                    <i class="fa fa-cogs"></i>下拉按钮
                </div>
            </div>
            <div class="panel-body">
                <h4 class="block">基本类型</h4>
                <div class="btn-group">
                    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-expanded="false"> Tools
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:;"> Settings
                                <span class="badge badge-success"> 3 </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Preferences </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Window Options </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Help
                                <span class="badge badge-danger"> 7 </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:;"> Action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action
                                <span class="badge badge-warning"> 2 </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link
                                <span class="badge badge-info"> 7 </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button class="btn btn-purple dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:;"> Action
                                <span class="badge badge-inverse"> 7 </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link
                                <span class="badge"> 4 </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <h4 class="block">带有按钮</h4>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <a class="btn btn-palegreen" href="javascript:;" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-user"></i> User
                            <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-pencil"></i> Edit </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-trash-o"></i> Delete </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-ban"></i> Ban </a>
                            </li>
                            <li class="divider"> </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="i"></i> Make admin </a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn btn-darkorange" href="javascript:;" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-user"></i> Settings
                            <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-plus"></i> Add </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-trash-o"></i> Edit </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-times"></i> Delete </a>
                            </li>
                            <li class="divider"> </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="i"></i> Full Settings </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <h4 class="block">分裂式按钮</h4>
                <div class="btn-group margin-bottom">
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="javascript:;"> Action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link </a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group margin-bottom">
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="javascript:;"> Action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link </a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group margin-bottom">
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="javascript:;"> Action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link </a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group margin-bottom">
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="javascript:;"> Action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link </a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group margin-bottom">
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="javascript:;"> Action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link </a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group margin-bottom">
                    <button type="button" class="btn btn-danger">Danger</button>
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="javascript:;"> Action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Another action </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Something else here </a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="javascript:;"> Separated link </a>
                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
        </div>
</div>
<div class="col-md-6 ">
    <!-- BEGIN SAMPLE FORM PORTLET-->
    <div class="panel panel-widget light bordered ">
        <div class="panel-heading">
            <div class="caption">
                <i class="fa fa-cogs"></i>按钮组
            </div>
        </div>
        <div class="panel-body">
            <div class="clearfix">
                <h4 class="block">基本类型</h4>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">左</button>
                    <button type="button" class="btn btn-default">中</button>
                    <button type="button" class="btn btn-default">右</button>
                </div>
                <div class="btn-group btn-group-solid">
                    <button type="button" class="btn btn-danger">左</button>
                    <button type="button" class="btn btn-success">中</button>
                    <button type="button" class="btn btn-warning">右</button>
                </div>
            </div>
            <div class="clearfix">
                <h4 class="block">Button Toolbar</h4>
                <div class="btn-toolbar margin-bottom">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">1</button>
                        <button type="button" class="btn btn-default">2</button>
                        <button type="button" class="btn btn-default">3</button>
                        <button type="button" class="btn btn-default">4</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">5</button>
                        <button type="button" class="btn btn-default">6</button>
                        <button type="button" class="btn btn-default">7</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">8</button>
                    </div>
                </div>
                <div class="btn-toolbar">
                    <div class="btn-group btn-group-solid">
                        <button type="button" class="btn btn-red">1</button>
                        <button type="button" class="btn btn-palegreen">2</button>
                        <button type="button" class="btn btn-blue">3</button>
                        <button type="button" class="btn btn-warning">4</button>
                    </div>
                    <div class="btn-group btn-group-solid">
                        <button type="button" class="btn btn-purple">5</button>
                        <button type="button" class="btn btn-darkorange">6</button>
                        <button type="button" class="btn btn-default">7</button>
                    </div>
                    <div class="btn-group btn-group-solid">
                        <button type="button" class="btn red">8</button>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h4 class="block">按钮组大小</h4>
                <div class="btn-toolbar">
                    <div class="btn-group btn-group-lg btn-group-solid margin-bottom">
                    <button type="button" class="btn btn-danger">左</button>
                    <button type="button" class="btn btn-success">中</button>
                    <button type="button" class="btn btn-warning">右</button>
                    </div>
                </div>
                <div class="btn-toolbar margin-bottom">
                    <div class="btn-group btn-group-solid">
                   <button type="button" class="btn btn-danger">左</button>
                    <button type="button" class="btn btn-success">中</button>
                    <button type="button" class="btn btn-warning">右</button>
                    </div>
                </div>
                <div class="btn-toolbar margin-bottom">
                    <div class="btn-group btn-group-sm btn-group-solid">
                        <button type="button" class="btn btn-danger">左</button>
                        <button type="button" class="btn btn-success">中</button>
                        <button type="button" class="btn btn-warning">右</button>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h4 class="block">嵌套按钮组</h4>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">
                        <i class="fa fa-user"></i> 个人信息</button>
                    <button type="button" class="btn btn-default">
                        <i class="fa fa-cogs"></i> 设置</button>
                    <button type="button" class="btn btn-default">
                        <i class="fa fa-bullhorn"></i> 消息</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-ellipsis-horizontal"></i> 更多
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="clearfix margin-bottom"> </div>
                <div class="btn-group btn-group-solid">
                    <button type="button" class="btn btn-magenta">
                        <i class="fa fa-user"></i> 个人信息</button>
                    <button type="button" class="btn btn-palegreen">
                        <i class="fa fa-cogs"></i> 设置</button>
                    <button type="button" class="btn btn-blue">
                        <i class="fa fa-bullhorn"></i> 消息</button>
                    <div class="btn-group btn-group-solid">
                        <button type="button" class="btn btn-maroon dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-ellipsis-horizontal"></i> More
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h4 class="block">垂直方向</h4>
                <div class="btn-group-vertical margin-right">
                    <button type="button" class="btn btn-default">Button</button>
                    <div class="btn-group">
                        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-default">Button</button>
                    <div class="btn-group">
                        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="btn-group-vertical btn-group-solid">
                    <button type="button" class="btn btn-purple">Button</button>
                    <div class="btn-group">
                        <button id="btnGroupVerticalDrop5" type="button" class="btn btn-magenta dropdown-toggle" data-toggle="dropdown"> Dropdown
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop5">
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-darkorange">Button</button>
                    <div class="btn-group">
                        <button id="btnGroupVerticalDrop8" type="button" class="btn btn-azure dropdown-toggle" data-toggle="dropdown"> Dropdown
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop8">
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                            <li>
                                <a href="javascript:;"> Dropdown link </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <h4 class="block">全部居中</h4>
                <div class="btn-group btn-group-justified">
                    <a href="javascript:;" class="btn btn-default"> 左 </a>
                    <a href="javascript:;" class="btn btn-default"> 中 </a>
                    <a href="javascript:;" class="btn btn-default"> 右 </a>
                </div>
                <div class="clearfix margin-bottom"> </div>
                <div class="btn-group btn-group btn-group-justified">
                    <a href="javascript:;" class="btn btn-darkorange"> 左 </a>
                    <a href="javascript:;" class="btn btn-maroon"> 中 </a>
                    <a href="javascript:;" class="btn btn-azure"> 右 </a>
                </div>
            </div>
        </div>
    </div>
    <!-- END SAMPLE FORM PORTLET-->
    <div class="panel panel-widget light bordered">
        <div class="panel-heading">
            <div class="caption">
                <i class="fa fa-cogs"></i>组合式按钮
            </div>
        </div>
        <div class="panel-body">
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-group"></i>
                <div> Users </div>
                <span class="badge badge-danger"> 2 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-barcode"></i>
                <div> Products </div>
                <span class="badge badge-success"> 4 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-bar-chart-o"></i>
                <div> Reports </div>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-sitemap"></i>
                <div> Categories </div>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-calendar"></i>
                <div> Calendar </div>
                <span class="badge badge-success"> 4 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-envelope"></i>
                <div> Inbox </div>
                <span class="badge badge-info"> 12 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-bullhorn"></i>
                <div> Notification </div>
                <span class="badge badge-danger"> 3 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-map-marker"></i>
                <div> Locations </div>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-money">
                    <i></i>
                </i>
                <div> Finance </div>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-plane"></i>
                <div> Projects </div>
                <span class="badge badge-info"> 21 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-thumbs-up"></i>
                <div> Feedback </div>
                <span class="badge badge-info"> 2 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-cloud"></i>
                <div> Servers </div>
                <span class="badge badge-danger"> 2 </span>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-globe"></i>
                <div> Regions </div>
            </a>
            <a href="javascript:;" class="component-btn">
                <i class="fa fa-heart-o"></i>
                <div> Popularity </div>
                <span class="badge badge-info"> 221 </span>
            </a>
        </div>
    </div>
</div>
</div>
